<template>
  <div class="seller-wrapper">
    <h3 class="seller-name">{{seller.name}}</h3>
    <div class="star-wrapper">
      <star :score="seller.score"></star>
    </div>
    <div class="devide">
      <span class="line"></span>
      <span class="devide-title">优惠信息</span>
      <span class="line"></span>
    </div>
    <ul>
      <li class="support-item" v-for="(item, index) of seller.supports" :key="index">
        <span class="support-icon"
          :class="classMap[item.type]"
        ></span>
        <span class="support-desc">{{item.description}}</span>
      </li>
    </ul>
    <div class="devide">
      <span class="line"></span>
      <span class="devide-title">商家公告</span>
      <span class="line"></span>
    </div>
    <p class="seller-desc">
      {{seller.bulletin}}
    </p>
    <span class="iconfont off-icon"
      @click="handleOff"
    >&#xe616;</span>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Star from '@/pages/common/Star'
export default {
  name: 'SellerInfo',
  components: {
    Star
  },
  data () {
    return {
      classMap: ['decrease', 'discount', 'special', 'invoice', 'bao']
    }
  },
  computed: {
    ...mapState(['seller'])
  },
  methods: {
    handleOff () {
      this.$emit('handleSellerInfo')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/common.styl'
  .seller-wrapper
    z-index 100
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    padding 1.28rem .72rem 0
    font-size .24rem
    color #ffffff
    text-align center
    font-weight 200
    background-color rgba(7, 17, 27, 0.8)
    .seller-name
      font-size .32rem
      font-weight 700
      line-height .32rem
      margin-bottom .32rem
    .star-wrapper
      & >>> .iconfont
        font-size .4rem
        line-height .48rem
        margin 0 .17rem
    .devide
      height .30rem
      margin .56rem 0 .48rem
      $flexVCenter()
      .devide-title
        font-size .28rem
        font-weight 700
        margin 0 .24rem
      .line
        flex 1
        height .03rem
        background-color rgba(255, 255, 255, 0.2)
    .support-item
      font-size 0
      text-align left
      height .32rem
      padding 0 .24rem
      margin-bottom .24rem
      .support-icon
        display inline-block
        width .32rem
        height .32rem
        margin-right .12rem
        background-size 100% 100%
        border-radius .04rem
        &.bao
          background-image url('./goods/bao.png')
        &.decrease
          background-image url('./goods/decrease.png')
        &.discount
          background-image url('./goods/discount.png')
        &.invoice
          background-image url('./goods/invoice.png')
        &.special
          background-image url('./goods/special.png')
      .support-desc
        display inline-block
        vertical-align top
        font-size .24rem
        margin-top .04rem
    .seller-desc
      padding 0 .24rem
      line-height .48rem
      text-align left
    .off-icon
      font-size .4rem
      color rgba(255, 255, 255, 0.5)
      position absolute
      bottom .64rem
      left 50%
      margin-left -.2rem
</style>
